<template>
  <div id="godward">
    <el-dialog v-model="wardDelete" title="垃圾奖杯不要了" width="30%">
      <span>删除后将不可恢复,确认了吗?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="wardDelete = false">取消</el-button>
          <el-button type="primary">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <div class="godward">
      <div class="head">
        <div class="add" @click="wardAdd">新奖杯</div>
        <div class="title">我的荣誉</div>
      </div>
      <div class="body">
        <div class="con">
          <table id="table">
            <thead>
              <tr>
                <th>奖项名</th>
                <th>发奖单位</th>
                <th>类别</th>
                <th>获奖时间</th>
                <th>发奖等级</th>
                <th>图片</th>
                <th>编辑</th>
              </tr>
            </thead>
          </table>
        </div>
        <div
          class="ConLi"
          v-loading="loading"
          element-loading-background="rgba(0,0,0, 0.5)"
          element-loading-text="数据加载中..."
        >
          <table id="table1">
            <tbody>
              <tr v-for="(item, index) in godData" :key="index">
                <th>
                  <div class="con">{{ item.hpTitle }}</div>
                </th>
                <th>
                  <div class="con">{{ item.hpUnit }}</div>
                </th>
                <th>
                  <div class="con">{{ item.Category }}</div>
                </th>
                <th>
                  <div class="con">{{ item.hpDate }}</div>
                </th>
                <th>
                  <div class="con">{{ item.hpLevel }}</div>
                </th>
                <th>
                  <div class="con">
                    <el-popover placement="right">
                      <template #reference>
                        <img
                          slot="reference"
                          :src="global.$httpUrl + item.hpImg1"
                          style="
                            width: 50px;
                            height: 50px;
                            display: flex;
                            justify-content: center;
                            margin: 5% auto;
                          "
                        />
                      </template>
                      <img
                        :src="global.$httpUrl + item.hpImg1"
                        style="width: 150px; height: 150px"
                      />
                    </el-popover>
                  </div>
                </th>

                <th class="lastTh">
                  <div class="editBtn">
                    <div class="edit" @click="wardEdit(item.id)">奖项详细</div>
                    <div class="line">|</div>
                    <div class="delete" @click="wardDelete = true">
                      删除奖项
                    </div>
                  </div>
                </th>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
//后端请求了
import { honour } from "@/api";
//全局变量
const internalInstance = getCurrentInstance();
let global = internalInstance.appContext.config.globalProperties;

const router = useRouter();
const loading = ref(true); //加载

const wardAdd = () => {
  router.push("/main/godWard/add");
};
const wardEdit = (Gid) => {
  router.push({
    path: "/main/godWard/edit",
    query: { id: Gid },
  });
};
let godData = ref(); //表格数据
const wardDelete = ref(false);
const godwardImg = ref(
  "https://p8.itc.cn/q_70/images03/20220810/d3d263ea662342b3a979f244fee36e7f.gif"
);
//刚进入网页先得到表格数据
onMounted(() => {
  dataList();
});
const dataList = () => {
  honour.allGet().then((res) => {
    loading.value = false; //取消加载
    godData.value = res.map((v) => {
      let Category=["科技","艺术","体育"];
      return {
        ...v,
        Category:Category[v.hpCategory-1],
      };
    });
  });
};
</script>

<style lang="less" scoped>
#godward {
  width: 100%;
  height: 100%;

  .godward {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-image-source: radial-gradient(
      65% 65%,
      transparent 0px,
      transparent 100%,
      cyan 100%
    );
    border-image-slice: 1;
    border-width: 2px;
    border-style: solid;
    background: linear-gradient(
      0deg,
      rgba(white, 0.1),
      rgba(white, 0.3),
      rgba(white, 0.1)
    );

    .head {
      width: 100%;
      height: 10%;
      overflow: hidden;

      .add {
        float: left;
        margin: 1% 5%;
        width: 10%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: aqua;
        border: 1px solid aqua;
        font-size: 14px;
        border-radius: 50px;

        &:hover {
          color: black;
          background-color: aqua;
          cursor: pointer;
        }
      }

      .title {
        width: 20%;
        margin: 0 auto;
        height: 80%;
        text-align: center;
        color: aliceblue;
        font-size: 24px;
        line-height: 60px;
        border-bottom: 5px solid aqua;
      }
    }

    .body {
      width: 95%;
      margin: 0 auto;
      height: 85%;
      overflow: hidden;

      .con {
        width: 100%;

        #table {
          width: 100%;
          border-collapse: collapse;
          table-layout: fixed;

          thead {
            border-bottom: 0.5px solid aqua;

            th {
              text-align: center;
              color: white;
              line-height: 50px;

              &:last-child {
                width: 15%;
              }
            }
          }
        }
      }

      .ConLi {
        width: 100%;
        height: 90%;
        overflow: hidden;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          width: 1px;
          height: 100%;
        }

        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 2px;
          background: aqua;
        }

        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          border-radius: 2px;
          background: rgba(white, 0.2);
        }

        #table1 {
          font-size: 14px;
          width: 100%;
          border-collapse: collapse;
          table-layout: fixed;

          tbody {
            opacity: 1;

            th {
              font-weight: normal;
              color: white;
              line-height: 50px;

              & > .con {
                width: 95%;
                margin: 0 auto;
                /*1. 先强制一行内显示文本*/
                white-space: nowrap;
                /*2. 超出的部分隐藏*/
                overflow: hidden;
                /*3. 文字用省略号替代超出的部分*/
                text-overflow: ellipsis;
              }
            }

            tr:nth-of-type(odd) {
              background: none;
            }

            tr:nth-of-type(even) {
              background-color: rgba(white, 0.15);
            }

            .lastTh {
              width: 15%;

              .editBtn {
                width: 100%;

                div {
                  width: 45%;
                  text-align: center;
                  font-weight: lighter;
                  float: left;
                  color: aqua;
                }

                .edit {
                  &:hover {
                    cursor: pointer;
                    color: #f4cd35;
                  }
                }

                .line {
                  width: 1px;
                  margin: 0 2%;
                  color: aqua;
                }

                .delete {
                  &:hover {
                    cursor: pointer;
                    color: red;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  :deep(.el-dialog) {
    --el-dialog-bg-color: rgba(27, 44, 92, 0.5);
    border-image-source: radial-gradient(
      65% 65%,
      transparent 0px,
      transparent 100%,
      cyan 100%
    );
    border-image-slice: 1;
    border-width: 2px;
    border-style: solid;

    .el-dialog__title {
      color: aqua;
    }

    .el-dialog__close {
      color: aqua;

      &:hover {
        color: red;
      }
    }

    .el-dialog__body {
      span {
        color: white;
      }
    }

    .el-button--primary {
      --el-button-bg-color: none;
      --el-button-border-color: rgba(aqua, 0.8);
      --el-button-hover-text-color: black;
      --el-button-hover-bg-color: rgba(aqua, 0.8);
      --el-button-hover-border-color: rgba(aqua, 0.8);
    }
  }
}
</style>
